<template>
	<view class="page" @click="again_try_login">
		<view class="content">
			<view class="logo">
				<image src="../../static/img/logo.png" mode=""></image>
			</view>
			<view class="title-box">
				互成壹家
			</view>
		</view>
		<view class="bottom-text">BECOME ONE FAMILY WITH EACH OTHER</view>
	</view>
</template>

<script>
// 服务层
import { user } from '../../server/user.js';

// 锁
let lock = false;

export default {
	data() {
		return {
			title: 'Hello'
		}
	},
	onLoad() {
	},
	methods: {
		// 登录的行为代码
		async login() {
			uni.showLoading({
			    title: '登录中...',
			    mask: true
			});
			try {
				let res = await user.wxLoginBycode();
				// 关闭提示
				uni.hideLoading();
				// 执行登录结果
				if (res.success) {
					uni.hideLoading();
					uni.switchTab({
						url: '/pages/main/main'
					});
				} else {
					// 登录失败的时候需要完成的事情
					uni.showToast({
						icon: 'error',
						title: '登录失败，请检查网络重新登录'
					});
				}
			} catch (err) {
				uni.showToast({
					icon: 'error',
					title: '登录失败，请检查网络重新登录'
				});
			}
			lock = false;
		},
		again_try_login() {
			try_login(this);
		}
	},
	onShow() {
		// 尝试进行登录
		setTimeout(() => {
            try_login(this);
		}, 1000);
	}
}

async function try_login(self) {
	if (lock) {
		return;
	}
	lock = true;
	let jwt = uni.getStorageSync('jwt');
	if (jwt) {
		user.checkLoginByJWT(jwt).then((login) => {
			if (login.success) {
				uni.switchTab({
					url: '/pages/main/main'
				});
				lock = false;
			} else {
				self.login();
			}
		}).catch((err) => {
			self.login();
		});
	} else {
		self.login();
	}
}
</script>

<style>
.page {
	--logo-size: 50vmin;
	width: 100vw;
	height: 100vh;
	/* background-color: #f5f5f5; */
	position: relative;
	user-select: none;
}
.content {
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.logo {
	width: var(--logo-size);
	height: var(--logo-size);
}
.logo image {
	width: 100%;
	height: 100%;
}
.title-box {
	font-size: 12vmin;
	font-family: '华文新魏';
}
.bottom-text {
	width: 100vw;
	text-align: center;
	font-size: 3vmin;
	color: rgb(106, 106, 106);
	position: absolute;
	top: 80%;
	transform: translateY(-50%);
}
</style>
